<template>
  <div class="container-item-photo">
    <div v-for="(temp, index) in dataList" :key="index" class="block-item-photo">
      <!-- 图片区 -->
      <div class="container-image">
        <van-image
          width="31.5vw"
          height="31.5vw"
          fit="cover"
          :src="`http://cq-photo.oss-cn-huhehaote.aliyuncs.com/` + temp.image_adr"
        />
      </div>
      <!-- 删除区 -->
      <div class="container-select" @click="delImage(temp)">
        <img src="@/assets/close.png" class="select">
      </div>
    </div>
    <!-- 上传图片 -->
    <div v-show="dataList.length<9" class="container-dynamic-upload">
      <label class="dynamic-upload-label" for="dynamic-upload">
        <span class="miva-plus">+</span>
      </label>
      <input id="dynamic-upload" type="file" style="display:none" @change="upload">
    </div>
    <!-- 遮罩 -->
    <van-overlay :show="upShow" />
    <div v-show="upShow" class="loading">
      <van-loading size="24px" color="#f45050" vertical>上传中...</van-loading>
    </div>
  </div>
</template>

<script>
import { uploadImage } from '@/api/miva_utils'
export default {
  props: {
    dataList: {
      type: Array,
      default() {
        const array = []
        return array
      }
    }
  },
  data() {
    return {
      upShow: false
    }
  },
  methods: {
    delImage(temp) {
      const index = this.dataList.indexOf(temp)
      this.dataList.splice(index, 1)
    },
    async upload(evt) {
      this.upShow = true
      const file = evt.target.files[0]
      const formData = new FormData()
      formData.append('file', file)
      const res = await uploadImage(formData)
      // eslint-disable-next-line
      if (res.code == 0) {
        this.upShow = false
        return this.$dialog.alert({
          message: `文件上传失败, ${res.msg}或文件超出大小限制`
        })
      }
      const {
        data: { image_adr = '' }
      } = res
      const firstIndex = image_adr.indexOf('.com/')
      const lastIndex = image_adr.indexOf('?')
      const image = image_adr.slice(firstIndex + 5, lastIndex)
      this.dataList.push({
        id: this.dataList.length + 1,
        image_adr: `${image}`,
        thumb_adr: `${image}`
      })
      evt.target.value = null
      this.upShow = false
    }
  }
}
</script>

<style lang="less" scoped>
.container-item-photo {
  width: calc(100vw);
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding: 2vw;
  box-sizing: border-box;
  .loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 748943649;
  }
  .block-item-photo {
    width: calc(100vw / 3 - 1.5vw);
    height: calc(100vw / 3 - 1.5vw);
    position: relative;
    padding: 1vw;
    box-sizing: border-box;
  }
  .container-image {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    .image {
      width: 100%;
      height: 100%;
    }
  }
  .container-select {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 2vw;
    right: 1vw;
    overflow: hidden;
  }
  .container-dynamic-upload {
    width: calc(100vw / 3 - 1.5vw);
    height: calc(100vw / 3 - 1.5vw);
    position: relative;
    padding: 1vw;
    box-sizing: border-box;
    color: #aaa;
    .dynamic-upload-label {
      width: 100%;
      height: 100%;
      display: block;
      border: 1px dotted;
      border-radius: 10px;
    }
    .miva-plus {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 40px;
    }
  }
}
</style>
